<template>
    <div class="revise">
        <v-navbar></v-navbar>
        <div class="revise-wrapper" v-if="arr[1]">
            <revise-tel></revise-tel>
        </div>
        <div class="revise-wrapper" v-if="arr[2]">
            <revise-login></revise-login>
        </div>
        <div class="revise-wrapper" v-if="arr[3]">
            <revise-pay></revise-pay>
        </div>
    </div>
</template>

<script>
import navbar from '@c/navbar/navbar'
import reviseTel from './reviseTel'
import reviseLogin from './reviseLogin'
import revisePay from './revisePay'
import {mapState, mapMutations} from 'vuex'

const TEL = 'tel'  // 手机号
const NOW_TEL = 'nowTel'  // 新手机号
const LOGIN = 'login' //登录
const PAY = 'pay' //支付

export default {
    name: 'Revise',
    data() {
        return {
            arr: [false,false,false,false]
        }
    },
    components: {
        'v-navbar': navbar,
        'revise-tel': reviseTel,
        'revise-login': reviseLogin,
        'revise-pay': revisePay
    },
    computed: {
        ...mapState(['wtitle', 'rback', 'revise'])
    },
    methods: {
        ...mapMutations(['WTITLE', 'RBACK', 'REVISE']),
        // 根据传值判断展示页面
        doParams() {
            let val = this.revise
            if (val === TEL) {
                this.WTITLE('更换手机号')
                this.arr[1] = true
            } else if (val === LOGIN) {
                this.WTITLE('修改登录密码')
                this.arr[2] = true
            } else if (val === PAY) {
                this.WTITLE('修改支付密码')
                this.arr[3] = true
            } else {
                this.$router.push('/userInfo')
            }
            this.RBACK(true)
        }
    },
    created() {
        this.doParams()
    }
}
</script>